<template>
    <div>
        <div class="swiper-container">
            <div class="swiper-wrapper">
                <div class="swiper-slide">
                    <router-link to="#">
                        <img src="./../../static/img/jhk-1557025935185.jpg" alt="">
                    </router-link>  
                </div>
                <div class="swiper-slide">
                    <router-link to="#">
                        <img src="./../../static/img/jhk-1557026152970.jpg" alt="">
                    </router-link>  
                </div>
                <div class="swiper-slide">
                    <router-link to="#">
                        <img src="./../../static/img/jhk-1557026334796.jpg" alt="">
                    </router-link> 
                </div>
                <div class="swiper-slide">
                    <router-link to="#">
                        <img src="./../../static/img/jhk-1557026334796.jpg" alt="">
                    </router-link> 
                </div>
            </div>
        </div>
        <div id="circle_content">
            <router-link to="/hanfu">
                <div class="circle">
                    <div class="circle_img">
                        <img src="./../../static/img/jhk-1557039090173.jpg" alt="">
                    </div>
                    <p>汉服</p>
                </div>
            </router-link>

            <router-link to="/jk">
                <div class="circle">
                    <div class="circle_img">
                        <img src="./../../static/img/5aaca8ed2f962.jpg" alt="">
                    </div>
                    <p>jk</p>
                </div>
            </router-link>

           <router-link to="/shouban">
                <div class="circle">
                    <div class="circle_img">
                        <img src="./../../static/img/123.jpg" alt="">
                    </div>
                    <p>手办</p>
                </div>
            </router-link>

             <!-- <router-link to="/hanfu">
                <div class="circle">
                    <div class="circle_img">
                        <img src="./../../static/img/jhk-1557041553970.jpg" alt="">
                    </div>
                    <p>动漫杂谈</p>
                </div>
            </router-link>

            <router-link to="/hanfu">
                <div class="circle">
                    <div class="circle_img">
                        <img src="./../../static/img/jhk-1557041637491.jpg" alt="">
                    </div>
                    <p>萌宠</p>
                </div>
            </router-link>

            <router-link to="/hanfu">
                <div class="circle">
                    <div class="circle_img">
                        <img src="./../../static/img/jhk-1557041719439.jpg" alt="">
                    </div>
                    <p>翻唱</p>
                </div>
            </router-link> -->
        </div>
        <foter></foter>
    </div>
</template>
<style scoped>
    .swiper-slide>a{
        display: inline-block;
        width: 100%;
        height: 100%;
    }
    .swiper-slide>a>img{
        width: 100%;
        height: 100%;
    }
    #circle_content{
        width: 100%;
        display: flex;
        flex-wrap: wrap;
        justify-content: space-around
    }
    #circle_content>a>.circle{
        height: 100px;
        margin:.5em 0 .5em .5em;
        padding: .5em;
        background: #e2dede;
        border-radius: 5px;
        text-align: center;
    }
    #circle_content>a>.circle>p{
        margin-top: .5em;
    }
    #circle_content>a>.circle>.circle_img{
        width: 60px;
        height: 60px;
        border-radius: 5px;
        overflow: hidden;
        margin: 0 auto;
    }
    .circle_img>img{
        width: 100%;
        height: 100%;
    }
</style>
<style>
.el-dialog {
    width: 95% !important;
}
.swiper-container {
        width: 100%;
        height: 150px;
        margin: 0 auto;
    }
</style>

<script>
import axios from 'axios'
import foter from '@/components/footer.vue'
import Swiper from 'swiper';
export default {
    data(){
        return {
            msg:'',//提示信息专用
            dialogFormVisible: false,
            // formLabelWidth: '220px',
            form:{
                name:'',
                phone:''
            },
            // priec:'50',
            GoodsInfo:{}
            
        }
    },
    mounted(){
        new Swiper('.swiper-container',{
            autoplay:true
        });
    },
    computed:{
        userName(){
            return this.$store.state.userName
        }
        
    },
    components:{
        foter
    },
    methods:{
        open() {
            this.$message(this.msg);
        },
        getGoodsInfo(){
            axios.get('http://localhost:3000/getgoodsInfo',{
                params:{
                    id:this.$route.query.id
                }
            }).then(res=>{
                const response=res.data;
                if(response.status==1){
                    this.GoodsInfo=response.result;
                }else{
                    this.msg=response.result;
                    this.open();
                }
            })
        },
        back(){
            this.$router.go(-1)
        }
    }
}
</script>
